<template>
	<view class="content">
		<uni-nav-bar class="nav" v-if="navBarShow">
			<view :class="[changeIdx===0 ? 'active' : '']" @click="changeContent(0)">推荐</view>
			<view :class="[changeIdx===1 ? 'active' : '']" @click="changeContent(1)">资讯</view>
		</uni-nav-bar>
		<view class="header">
			<!-- 轮播图位置 -->
			<view class="uni-padding-wrap">
				<swiper class="swiper" autoplay="true" interval="3000" duration="300" circular="true">
					<swiper-item class="swiper-item" v-for="item in advertersList" :key="item.id"
						@click="goSkip(item.link)">
						<image :src="item.image" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<image class="helf-circle" src="../../static/images/half-circle.png"></image>
			<!-- 精彩动态、个人中心 -->
			<view class="tar-title">
				<navigator open-type="switchTab" url="/pages/trend/trend">
					<view class="tar-item">
						<image src="../../static/images/coffee.png" mode=""></image>
						<view>精彩动态</view>
					</view>
				</navigator>
				<navigator open-type="switchTab" url="/pages/mine/mine">
					<view class="tar-item">
						<image src="../../static/images/ran.png" mode=""></image>
						<view>个人中心</view>
					</view>
				</navigator>
			</view>
		</view>
		<!-- 推荐 资讯 按钮-->
		<view class="rec-mes">
			<view class="rec" :class="[changeIdx===0 ? 'active' : '']" @click="changeContent(0)">推荐</view>
			<view class="mes" :class="[changeIdx===1 ? 'active' : '']" @click="changeContent(1)">资讯</view>
		</view>

		<!-- 推荐 资讯 内容 -->
		<view class="resContent">
			<swiper :style="{ height: listHeight}" :current="changeIdx" @animationfinish="animationfinish">
				<!-- 推荐 -->
				<swiper-item>
					<waterfall-new v-model="feedsList" ref="uWaterfall">
						<template v-slot:left="{leftList}">
							<view v-for="(item, index) in leftList" :key="index" style="width: 358upx;">
								<navigator open-type="navigate" :url="'/subPages/trendDetail/trendDetail?id='+ item.id">
									<view class="contentShow">
										<image class="pic" :src="item.image" mode="widthFix" :lazy-load="true" />
										<view class="contentBtn">
											<view class="title">{{item.feed_content}}</view>
											<view class="info">
												<view class="user">
													<image class="userPhoto" :src="item.avatar"></image>
													<view class="userName">{{item.name}}</view>
												</view>
												<view class="love" @click.stop="changeLove(item)">
													<image v-if="item.has_like" class="loving" src="../../static/images/lover.png" mode="" />
													<image v-else class="loving" src="../../static/images/love.png" mode="" />
													<text>{{item.like_count}}</text>
												</view>
											</view>
										</view>
									</view>
								</navigator>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view v-for="(item, index) in rightList" :key="index" style="width: 358upx;">
								<navigator open-type="navigate" :url="'/subPages/trendDetail/trendDetail?id='+ item.id">
									<view class="contentShow">
										<image class="pic" :src="item.image" mode="widthFix" :lazy-load="true" />
										<view class="contentBtn">
											<view class="title">{{item.feed_content}}</view>
											<view class="info">
												<view class="user">
													<image class="userPhoto" :src="item.avatar"></image>
													<view class="userName">{{item.name}}</view>
												</view>
												<view class="love" @click.stop="changeLove(item)" >
													<image v-if="item.has_like" class="loving" src="../../static/images/lover.png" mode="" />
													<image v-else class="loving" src="../../static/images/love.png" mode="" />
													<text>{{item.like_count}}</text>
												</view>
											</view>
										</view>
									</view>
								</navigator>
							</view>
						</template>
					</waterfall-new>
				</swiper-item>
				<!-- 资讯 -->
				<swiper-item>
					<view class="information" v-for="(item, index) in newsList" :key="index">
						<navigator open-type="navigate" :url="'/subPages/newDetail/newDetail?id=' + item.id">
							<view class="informationItem">
								<view class="informationItem-l">
									<view class="title">
										{{item.title}}
									</view>
									<view class="info">
										<view class="publisher">
											{{item.author}}
										</view>
										<view class="time">
											{{item.created_at}}发布
										</view>
									</view>
								</view>
								<image class="img" :src="item.image" mode=""></image>
							</view>
						</navigator>
						<u-line color="#f3f3f3" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 注册的全局组件 -->
		<login v-if="!loginState" ref="login"></login>
		<share></share>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import waterfallNew from '@/components/waterfall-new/index.vue'
	import { mapState } from 'vuex'
	import feedMixin from '@/components/mixins/feedMixin.js'
	export default {
		// mixins 混入的使用
		// 在feedMixin定义了个页面所需要的方法
		mixins:[feedMixin],
		components: {
			uniNavBar,
			waterfallNew
		},
		data() {
			return {
				changeIdx: 0,
				// 广告位列表
				advertersList: [],
				// 批量获取动态列表信息
				feedsList: [],
				// 批量获取资讯列表信息
				newsList: [],
				// 导航栏显示标志
				navBarShow: false,
				// 设置推荐与咨讯的统一高度
				listHeight: "500px",
				// 设置推荐的自身高度
				recHeight: 0,
				// 资讯的自身高度
				newsHeight: 0,
				// 推荐的滚动高度
				recScroll: 0,
				// 资讯的滚动高度
				newsScroll: 0

			}
		},
		computed:{
			...mapState (['loginState'])
		},
		onLoad() {
			// 加载广告位
			this.getAdv()
			// 批量获取动态列表信息
			this.getfeeds()
			//  批量获取资讯列表信息
			this.getNews()
			// 当用户登录成功后,要重新请求首页数据,通过uni.$on触发事件
			// 在login组件,通过uni.$emit 监听事件
			uni.$on('userIndexData', () => {
				this.changeIdx = 0
				this.feedsList = []
				this.$refs.uWaterfall.clear()
				this.getfeeds()
			})
			// 当点赞或取消点赞时,要监听当前项的某个属性的改变
			uni.$on('getIndexFeed', item => {
				this.$refs.uWaterfall.modify(item.id, "has_like", item.has_like)
				this.$refs.uWaterfall.modify(item.id, "like_count", item.like_count)
			})
		},
		methods: {
			// 监听页面滚动的距离(页面生命周期)
			onPageScroll(e) {
				if (e.scrollTop > 229) {
					this.navBarShow = true
				} else {
					this.navBarShow = false
				}
				if (this.changeIdx === 0) {
					// 监听以前推荐滚动的位置
					this.recScroll = e.scrollTop
				} else {
					// 监听以前资讯滚动的位置
					this.newsScroll = e.scrollTop
				}
			},
			// 根据点击的是推荐还是资讯实现切换
			changeContent(idx) {
				this.changeIdx = idx
				if (idx === 0) {
					this.listHeight = this.recHeight
					// 切换时滚动到之前所记录的位置
					uni.pageScrollTo({
						scrollTop: this.recScroll,
						duration: 0
					})
				} else {
					this.listHeight = this.newsHeight
					uni.pageScrollTo({
						scrollTop: this.newsScroll,
						duration: 0
					})
				}
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.getAdv()
				if (this.changeIdx === 0) {
					this.$refs.uWaterfall.clear()
					this.getfeeds()
				} else {
					this.getNews()
				}
				uni.stopPullDownRefresh()
			},
			// 页面滚动到底部的事件
			onReachBottom() {
				if (this.changeIdx === 0) {
					this.getfeeds()
				} else {
					this.getNews()
				}
			},
			// 在单个swiper动画完成后(滑动结束后)
			animationfinish(event) {
				if (event.detail.current === 0) {
					this.changeIdx = 0
					uni.pageScrollTo({
						scrollTop: this.recScroll,
						duration: 0
					})
				}
				if (event.detail.current === 1) {
					this.changeIdx = 1
					uni.pageScrollTo({
						scrollTop: this.newsScroll,
						duration: 0
					})
				}
			},
			// 获取广告位列表
			async getAdv() {
				let { data } = await this.$u.api.getAdvert({
					space: "1,2,3"
				})
				data.map(item => {
					return this.advertersList.push({
						id: item.id,
						image: item.data.image,
						link: item.data.link
					})
				})
			},
			// 批量获取动态列表信息
			async getfeeds() {
				uni.showLoading({
					title:'正在加载中'
				})
				let { data } = await this.$u.api.getfeed()
				uni.hideLoading()
				let feedsList = data.feeds.map(item => {
					return {
						...item,
						image: item.images[0] ? this.BaseFileURL + item.images[0].file : '/static/images/logo.png',
						avatar: item.user.avatar ? item.user.avatar : "/static/images/nopic.png",
						name: item.user.name
					}
				})
				this.feedsList = [...this.feedsList, ...feedsList]
				uni.$on('swiperHeightChange', height => {
					console.log(height)
					// 将获取到的瀑布流的高度值,动态赋值给swiper的高度
					this.recHeight = height
					this.listHeight = this.recHeight
				})
			},
			// 批量获取资讯列表信息
			async getNews() {
				let { data } = await this.$u.api.getNews()
				let newsList = data.map(item => {
					let created_at = new Date(item.created_at)
					let year = created_at.getFullYear()
					let month = created_at.getMonth() + 1
					let date = created_at.getDate()
					let time = year + '年' + month + '月' + date + '日'
					return {
						...item,
						image: this.BaseFileURL + item.image.id,
						created_at: time,
					}
				})
				this.newsList = [...this.newsList, ...newsList]
				// 获取到资讯的自身高度
				this.newsHeight = this.newsList.length * 84 + 80 + "px"
				this.listHeight = this.newsHeight
			},
			// 点击轮播跳转到外部资源
			goSkip(link) {
				uni.navigateTo({
					url: '/pages/web-view/web-view?link=' + link
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-h {
		height: 30000rpx;
	}

	.nav {
		width: 100%;
		::v-deep.uni-navbar__header {
			width: 100%;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 99;
		}

		::v-deep.uni-navbar__content_view {
			justify-content: center;

			view:nth-child(1) {
				margin-right: 20rpx
			}
		}
	}
	.content {
		background-color: #f1f1f1;
	}

	.swiper {
		width: 100%;
		height: 400upx;

		.swiper-item {
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.helf-circle {
		height: 50upx;
		width: 100%;
		transform: translateY(-49upx);
	}

	.header {
		position: relative;
	}

	// 精彩动态、个人中心
	.tar-title {
		overflow: hidden;
		position: absolute;
		bottom: 0upx;
		width: 710upx;
		height: 160upx;
		margin-left: 20upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.tar-item {
			width: 328upx;
			height: 96upx;
			border-radius: 50upx;
			border: 2upx solid #9eb7c6;
			display: flex;
			align-items: center;
			font-size: 30upx;
			background-color: #fff;

			image {
				width: 44upx;
				height: 44upx;
				margin: 0 30upx 0 50upx;
			}
		}
	}

	// 推荐 资讯
	.rec-mes {
		overflow: hidden;
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		font-size: 36upx;
		color: #9B9B9B;

		.mes,
		.rec {
			padding: 0 20upx;
		}
	}

	.active {
		color: #0050ff;
	}

	.contentShow {
		width: 358upx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 10upx;
		margin-bottom: 10upx;

		.pic {
			width: 100%;
			border-radius: 10upx;
		}

		.contentBtn {
			width: 100%;
			padding: 14upx 10upx 16upx;

			.title {
				margin-bottom: 14upx;
				font-size: 28upx;
				color: #001432;
			}

			.info {
				display: flex;
				justify-content: space-between;
				.user {
					display: flex;
					.userPhoto {
						width: 40upx;
						height: 40upx;
						margin-right: 10upx;
					}
					.userName {
						color: #757474;
						font-size: 24upx;
					}
				}
				.love{
					display: flex;
					align-items: center;
					.loving {
						margin-right: 8upx;
						width: 32upx;
						height: 28upx;
					}
				}
				
			}
		}
	}

	// 资讯
	.information {
		background-color: #fff;
		padding: 0 20rpx;

		.informationItem {
			padding: 24rpx 10rpx;
			// margin: 0 20rpx;
			display: flex;
			justify-content: space-between;

			.informationItem-l {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					color: #001432;
					font-size: 30rpx;
				}

				.info {
					color: #999;
					font-size: 24rpx;
					display: flex;
					justify-content: space-between;

					.publisher {}

					.time {}
				}
			}

			.img {
				width: 120rpx;
				height: 120rpx;
				margin-left: 24rpx;
				border-radius: 15rpx;
			}
		}


	}
</style>
